<template>
    <div class="ex-detail" v-if="show">
        <div class="em-title">
            <p>Technical details</p>
        </div>
        <!-- <Transition name="slide-fade" @after-leave="onAfterLeave"> -->
        <div class="em-des">
            {{ title }}
        </div>
        <div class="ep-content">
            <div class="epc-card" v-for="(item,index) in data">
                <div class="epc-left">
                    <div class="epc-left-point"></div>
                    <p>{{item.parameter}}</p>
                </div>
                <div class="epc-right">
                    <p>{{item.value}}</p>
                </div>
            </div>

        </div>

    </div>
</template>
<script setup lang="ts">
    const props = defineProps({
        data: {
            type: Object,
            required: false,
        },
        title: {
            type: String,
            required: false,
        },
    });

    const title = ref("Model")
    const data = ref();
    if (props.data) {
        data.value = props.data;
    }
    if (props.title) {
        title.value = props.title;
    }
    const show = ref(data.value.length > 0)

</script>
<style scoped lang="scss">
    .ex-detail {
        position: relative;
        background: #fff;
        width: 1600px;
        //height: 1140px;
        padding: 50px 160px;

        .em-title {
            margin-top: 121px;
            font-size: 56px;
            color: #000;
            font-weight: 600;
            // margin-bottom: 112px;
            width: 100%;
            text-align: center;
        }

        .em-des {
            margin-top: 52px;
            font-size: 20px;
            color: #000;
            font-weight: 700;
            // margin-bottom: 112px;
            width: 1600px;
            height: 40px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.25);
            font-style: normal;
            text-transform: none;
        }

        .ep-content {
            width: 100%;
            // margin-bottom: 10px;
            margin-top: 8px;

            .epc-card {
                overflow: hidden;
                display: inline-flex;
                margin-top: 8px;

                .epc-left {
                    width: 776px;
                    height: 72px;
                    background: linear-gradient(270deg, rgba(199, 142, 102, 0) 0%, rgba(199, 142, 102, 0.1) 100%);
                    border-radius: 0px 0px 0px 0px;
                    display: inline-flex;

                    .epc-left-point {
                        width: 24px;
                        height: 24px;
                        margin: 24px;
                        /*background: radial-gradient(circle, #C78E66 0%, rgba(199, 142, 102, 0.18) 73%, rgba(199, 142, 102, 0) 100%);*/
                        background: linear-gradient(270deg, rgba(199, 142, 102, 0) 0%, rgba(199, 142, 102, 0.1) 100%);
                        border-radius: 50%;
                    }

                    p {
                        font-size: 16px;
                        line-height: 72px;
                    }
                }

                .epc-right {
                    width: 776px;
                    height: 72px;
                    background: linear-gradient(90deg, rgba(234, 234, 235, 0.2) 0%, rgba(234, 234, 235, 0.16) 18%, rgba(234, 234, 235, 0) 100%);
                    border-radius: 0px 0px 0px 0px;

                    p {
                        font-size: 16px;
                        line-height: 72px;
                        margin-left: 24px;
                    }
                }

            }

            .epc-card:hover .epc-img img {
                transform: scale(1.05);
            }

        }


    }


    .slide-fade-enter-active {
        transition-delay: 1s;
        transition: all 0.3s ease-out;
    }

    .slide-fade-leave-active {
        transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter-from,
    .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
</style>
